<!DOCTYPE html>
<html>
<head>
    <title>版本管理系統</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .version-card {
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2>版本管理系統</h2>
        
        <!-- 添加新版本表單 -->
        <div class="card mb-4">
            <div class="card-header">
                添加新版本
            </div>
            <div class="card-body">
                <form id="uploadForm">
                    <div class="mb-3">
                        <label class="form-label">版本號</label>
                        <input type="text" class="form-control" name="version" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">平台</label>
                        <select class="form-control" name="platform" required>
                            <option value="windows">Windows</option>
                            <option value="macos">macOS</option>
                            <option value="linux">Linux</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">安裝程序</label>
                        <input type="file" class="form-control" name="installer" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">更新說明</label>
                        <textarea class="form-control" name="releaseNotes" rows="3" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">上傳新版本</button>
                </form>
            </div>
        </div>

        <!-- 版本列表 -->
        <div class="card">
            <div class="card-header">
                版本歷史
            </div>
            <div class="card-body" id="versionList">
                <!-- 版本列表將通過 JavaScript 動態加載 -->
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 加載版本列表
        async function loadVersions() {
            try {
                const response = await fetch('/users/version-history');
                const data = await response.json();
                const versionList = document.getElementById('versionList');
                versionList.innerHTML = '';

                data.versions.sort((a, b) => b.version.localeCompare(a.version))
                    .forEach(version => {
                        const card = document.createElement('div');
                        card.className = 'card version-card';
                        card.innerHTML = `
                            <div class="card-body">
                                <h5 class="card-title">版本 ${version.version} (${version.platform})</h5>
                                <h6 class="card-subtitle mb-2 text-muted">
                                    發布時間: ${new Date(version.releaseDate).toLocaleString()}
                                </h6>
                                <p class="card-text">${version.releaseNotes}</p>
                                <a href="${version.downloadUrl}" class="btn btn-primary btn-sm">下載</a>
                                <button onclick="deleteVersion('${version.version}', '${version.platform}')" 
                                        class="btn btn-danger btn-sm">刪除</button>
                            </div>
                        `;
                        versionList.appendChild(card);
                    });
            } catch (error) {
                console.error('Error loading versions:', error);
            }
        }

        // 上傳新版本
        document.getElementById('uploadForm').onsubmit = async function(e) {
            e.preventDefault();
            const formData = new FormData(this);

            try {
                const response = await fetch('/users/add-version', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                alert(result.message);
                loadVersions();
                this.reset();
            } catch (error) {
                console.error('Error uploading version:', error);
                alert('上傳失敗');
            }
        };

        // 刪除版本
        async function deleteVersion(version, platform) {
            if (!confirm(`確定要刪除 ${platform} 平台的版本 ${version} 嗎？`)) {
                return;
            }

            try {
                const response = await fetch('/users/delete-version', {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ version, platform })
                });
                const result = await response.json();
                alert(result.message);
                loadVersions();
            } catch (error) {
                console.error('Error deleting version:', error);
                alert('刪除失敗');
            }
        }

        // 初始加載
        loadVersions();
    </script>
</body>
</html> 